<!--
@fucntion: 数据监控
-->
<template>
    <el-row>

      <el-card>
        <el-row v-for="(carindex, index) in carindex" :key="index">
        <el-collapse>
        <el-collapse-item name="0000">
          
          <template slot="title">
            <span style="float:left;font-weight:bold;font-size:14px;color:#2C8DF4;">{{carindex.DWBH}}</span>
          </template>
          <!-- 卡片视图 -->
          <el-col :span="4" v-for="(carData, index) in tableData" :key="index" size="mini">
            <el-card :body-style="{ padding: '0px' }" style="margin : 4px;" v-if="(carindex.DWBH) == carData.DWBH">
              <div style="padding: 4px; background-color: #E4E7ED;margin : 1px; ">
                  <div style="padding-top: 2px;padding-bottom: 12px;">
                    <span>{{carData.CJQMC}}</span>
                    <el-button icon="el-icon-share" type="primary" plain size="mini" style="float:right" 
                    @click="$router.push({path: '/TemperatureAndHumidity/Detailed', query:{ID : carData.CJQBH}})"></el-button> 
                  </div>
                  <el-row :gutter="24" style="background-color: #F2F6FC;margin-right: 4px;margin-left: 4px;">
                    <el-col :span="12" style="margin-top:10px">
                      <img style="width: 25px; height: 25px" :src="((carData.CJWDZ < carData.WDSXZ && carData.CJWDZ > carData.WDXXZ)?ur_WD_ZC:(((carData.CJWDZ < carData.WDXXZ)?ur_WD_D:ur_WD_G)))">
                      <div>
                        <span>{{carData.CJWDZ}}℃</span>
                      </div> 
                    </el-col>
                    <el-col :span="12" style="margin-top:10px">
                      <img style="width: 25px; height: 25px" :src="((carData.CJSDZ < carData.SDSXZ && carData.CJSDZ > carData.SDXXZ)?ur_SD_ZC:(((carData.CJSDZ < carData.SDXXZ)?ur_SD_D:ur_SD_G)))">
                      <div>
                        <span>{{carData.CJSDZ}}%RH</span>
                      </div>
                    </el-col>
                  </el-row>
              </div>
            </el-card>
          </el-col>
        
        </el-collapse-item>
        </el-collapse>
        </el-row>
      </el-card>
    </el-row>
</template>

<script>

export default {
  name: "Monitoring",
  methods: {

  },
  data() {
    return {
      tableData:'',//查询数据储存
      // activeNames: [],
      carindex:'',
      ur_WD_G: '../../../static/img/WD_G.png',
      ur_WD_ZC: '../../../static/img/WD_ZC.png',
      ur_WD_D: '../../../static/img/WD_D.png',
      ur_SD_G: '../../../static/img/SD_G.png',
      ur_SD_ZC: '../../../static/img/SD_ZC.png',
      ur_SD_D: '../../../static/img/SD_D.png',
    };
  },
  methods: {
    shrink(DWBH){
      this.$message('收缩'+DWBH);
    },
    onSearching: function() {//查询
      var me = this;
      let url = "/static/data/Monitoring.json";// /jcJsxxb
      if(url !== "") {
        me.getRequest(url, this. QueryData).then(resp => {
            if(resp.status == 200) {
              this.tableData = resp.data.data;
            }
        });
      }
    },
    onDetails: function(){
      
    }
  },
  created: function() {
    var me = this;

    this.onSearching();

    // 获取KSBH
    me.getRequest("/static/data/carindex.json",{}).then(resp=>{
      if(resp.status == 200) {
        me.carindex = resp.data;
      }
    });

  }
};
</script>

<style lang="scss">
</style>